<template>
  <el-menu :default-active="activeMenu" mode="horizontal" @select="getChildrenRoute">
    <template v-for="(item, index) in topMenus">
      <el-menu-item :key="index" :index="item.rootCode">
        <svg-icon :icon-class="getIconByCode(item.rootCode)" />
        {{ item.rootName }}
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import { getFuncModules } from '@/api/user'
export default {
  data() {
    return {
      activeMenu: sessionStorage.activeKey || 'G',
      topMenus: []
    }
  },
  mounted() {
    getFuncModules().then(res => {
      this.topMenus = res.data.data || []
      if (!sessionStorage.activeKey) {
        this.activeMenu = res.data.data[0].rootCode
      }
      this.getChildrenRoute(this.activeMenu)
    })
  },
  methods: {
    getIconByCode(code) {
      if (code === 'G') {
        return 'voucher'
      }
      if (code === 'I') {
        return 'sale'
      }
      if (code === 'S') {
        return 'setting'
      }
    },
    getChildrenRoute(key) {
      sessionStorage.activeKey = key
      this.$store.dispatch('permission/generateSidebarRoutes', key)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu--horizontal{display: inline-block;border-bottom: solid 1px transparent!important;}
.el-menu-item {float: left;  height: 50px!important;  line-height: 50px!important;  margin: 0;  border-bottom: 3px solid transparent;  color: #ddd;  padding: 0 5px;  margin: 0 10px!important;}
.el-menu{ background: transparent;}
>>>.el-menu-item:hover{
  background:transparent!important;
  color: #fff!important;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 3px solid #fff;
  color: #fff!important;
  background:transparent!important;
}
.el-menu--horizontal > .el-menu-item {
  border-bottom: 3px solid #fff;
  color: #ddd;
}
.el-menu--horizontal > .el-submenu .el-submenu__title {
	height: 50px !important;
	line-height: 50px !important;
}
</style>
